<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String basePath = request.getScheme() + "://" +
            request.getServerName() + ":"
            + request.getServerPort() +
            request.getContextPath() + "/";
%>
<html>
<head>
    <title><%=request.getAttribute("role")%>界面</title>
    <base href="<%=basePath%>">
    <script src="static/js/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="static/bootstrap-3.3.7/css/bootstrap.min.css">
    <script src="static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        td, th {
            text-align: center;
        }

        a {
            text-decoration: none;
        }

        a:hover {
            text-decoration: none;
        }
    </style>
    <script>
        $(function () {
            var path = window.location.pathname;
            var isUser = path.includes("user");
            if (isUser) {
                userSetting();
            } else {
                $("#deleteSelected").click(function () {
                    if (confirm("您确定要删除选中的条目吗")) {
                        //判断被选择的条目有多少个
                        var pass = false;
                        for (var i = 1; i < $("[type=checkbox]").length; i++) {
                            if ($("[type=checkbox]")[i].checked) {
                                pass = true;
                                break;
                            }
                        }
                        if (pass) {
                            $("#form").submit();
                        } else {
                            alert("被删除的条目个数不能为0");
                        }
                    }
                });
            }
            $("#allSelect").click(function () {
                //进行取反操作
                for (var i = 1; i < $("[type=checkbox]").length; i++) {
                    $("[type=checkbox]")[i].checked = !$("[type=checkbox]")[i].checked;
                }
            })

        });

        function notify() {
            alert("您没有权限进行该操作,请联系管理员");
        }

        function ban() {
            if ($("#name").val() == "" && $("#address").val() == "" && $("#email").val() == "") {
                alert("查询条件不能为空");
                $("#query").attr("onsubmit", "return false");
            } else {
                $("#query").attr("onsubmit", "return true");
            }
        }

        function userSetting() {
            $(".update").attr("href", "javascript:notify();");
            $(".delete").attr("href", "javascript:notify();");
            $(".deleteSelected").attr("onclick", "javascript:notify();");
            $("#insert").attr("href", "javascript:notify();");
            $(".logout").css("display", "none");
        }
    </script>
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 ">
            <div style="text-align: center">
                <h1>
                    <strong>欢迎<%=request.getAttribute("role")%>
                    </strong>
                </h1>
            </div>
            <div class="col-md-12">
                <div style="float: left">
                    <div style="margin-top: -16px">
                        <h1>
                            <small>用户列表——————显示所有用户</small>
                        </h1>
                    </div>
                </div>
                <div style="float: right">
                    <a href="admin/logout.do">
                        <button type="button" class="btn btn-danger logout" style="color: white">退出登录</button>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div style="float: left;padding-left: 16px;padding-top: 5px">
            <form action="${role == "管理员"? "admin" : "user"}/findAll.do" method="post" class="form-inline" id="query">
                <div class="form-group">
                    <label for="name">姓名</label>
                    <input type="text" class="form-control" id="name" name="name" value="${condition.name}"
                           placeholder="请输入姓名">
                </div>
                <div class="form-group">
                    <label for="address">籍贯</label>
                    <input type="text" class="form-control" id="address" name="address" value="${condition.address}"
                           placeholder="请输入籍贯">
                </div>
                <div class="form-group">
                    <label for="email">邮箱</label>
                    <input type="email" class="form-control" id="email" name="email" value="${condition.email}"
                           placeholder="请输入邮箱">
                </div>
                <button type="submit" class="btn btn-default" onclick="ban()">查询</button>
            </form>
        </div>
        <div style="float: right;margin: 5px">
            <a href="admin/toAddUser.do" id="insert">
                <button type="button" class="btn btn-info">添加联系人</button>
            </a>
            <button type="button" class="btn btn-info deleteSelected" id="deleteSelected">删除选中</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 column">
            <form action="admin/deleteUsers.do" method="post" id="form">
                <table border="1" class="table table-bordered table-hover">
                    <thead>
                    <tr class="success">
                        <th><input id="allSelect" value="0" type="checkbox" style="size: 5px"/></th>
                        <th>用户编号</th>
                        <th>用户姓名</th>
                        <th>用户性别</th>
                        <th>用户年龄</th>
                        <th>用户地址</th>
                        <th>用户QQ</th>
                        <th>用户邮箱</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach var="user" items="${page.list}">
                        <tr>
                            <td><input type="checkbox" name="uid" value="${user.id}"/></td>
                            <td>${user.id}</td>
                            <td>${user.name}</td>
                            <td>${user.gender}</td>
                            <td>${user.age}</td>
                            <td>${user.address}</td>
                            <td>${user.qq}</td>
                            <td>${user.email}</td>
                            <td>
                                <a href="admin/toUpdateUser.do?id=${user.id}" class="update">修改</a>
                                &nbsp;|&nbsp;
                                <a href="admin/deleteUser.do?id=${user.id}" class="delete">删除</a>
                            </td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </form>
        </div>
    </div>
    <div>
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li class="${currentPage == 1 ? 'disabled' : ''}">
                    <a href="${role == "管理员"? "admin" : "user"}/findAll.do?rows=5&currentPage=${currentPage-1}"
                       aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <c:forEach begin="1" end="${page.totalPage}" var="i">
                    <li class="${currentPage == i ? 'active' : ''}">
                        <a href="${role == "管理员"? "admin" : "user"}/findAll.do?rows=5&currentPage=${i}&name=${condition.name}&address=${condition.address}&email=${condition.email}">${i}</a>
                    </li>
                </c:forEach>
                <li class="${page.totalPage == currentPage ? 'disabled' : ''}">
                    <a href="${role == "管理员"? "admin" : "user"}/findAll.do?rows=5&currentPage=${currentPage+1}"
                       aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                <span style="font-size: 25px;margin-left: 5px">
                    共${page.totalCount}条记录，共${page.totalPage}页
                </span>
            </ul>
        </nav>
    </div>
</div>
</body>
</html>